<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input type="text" placeholder="enter the name you search" v-model="keyword"/>&nbsp;
      <button @click="searchUsers">Search</button>
    </div>
  </section>
</template>

<script>
import axios from 'axios'

export default {
  name: "mySearch",
  data() {
    return {
      keyword: '',
    };
  },
  methods: {
    searchUsers() {
        /**
         * (3) 传数据时用一个对象，里面属性一一写清楚的好处：
         *     1.写的很清楚，传的数据是什么，既方便自己以后看，也方便别人别人看
         *     2.属性一一对应写，这样属性就不用一定按照顺序写了，只要个数对了就行了
         *     这就是多个变量封装成一个对象的好处
         * */ 
        this.$bus.$emit('updateListData',{users:[],isFirst:false,isLoading:true,errMsg:''})
        // (1) 注意想要获取js字符串，得用模板字符串``,再用ES6的${}
        axios.get(`https://api.github.com/search/users?q=${this.keyword}`).then(
          res => {
            console.log('请求成功了!');
            // (2) 事件名字就相当于上车地点，emit就相当于上车的动作
            // this.$bus.$emit('getUsers',res.data.items)
            // 请求成功时
            this.$bus.$emit('updateListData',{users:res.data.items,isLoading:false,errMsg:''})
          },
          err => {
            console.log('请求失败了!'+err.message);
            // 请求失败时
            this.$bus.$emit('updateListData',{users:[],isLoading:false,errMsg:err.message})
          }
        )
    },
  },
};
</script>

<style></style>
